<template>
  <div class="yidong">
      <div class="header">
          <ul>
            <li v-for="(i,index) in data" :key="index">{{i.name}}</li>
          </ul>
      </div>
      <div class="con">
          <div class="left_con" ref="aa">
              <ul>
                  <li v-for="(i,index) in list" :key="index" @click='fn(index)' :class="{show:num==index}">{{i.name}}</li>
              </ul>
          </div>
          <div class="right_con" ref="bb">
              <ul>
                  <li v-for="(i,index) in con" :key="index">
                      <div class="img">
                        <img :src="i.img" alt="">
                      </div>
                      <div class="contion">
                        <p>{{i.p1}}</p>
                        <p>{{i.p2}}</p>
                        <p>{{i.p3}}</p>
                        <p><span>￥</span><i>{{i.p4}}</i><span>.99</span></p>
                        <p><img :src="i.img2" alt="">{{i.span5}}</p>
                      </div>
                  </li>
              </ul>
          </div>
      </div>


  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    data(){
        return{
            data:[
                {name:'综合'},
                {name:'销量'},
                {name:'价格'}
            ],
            list:[
                {name:"全部"},
                {name:"日用百货"},
                {name:"文具用品"},
                {name:"食品生鲜"},
                {name:"图书音像"},
                {name:"母婴童装"},
                {name:"玩具乐器"},
                {name:"全部"},
                {name:"日用百货"},
                {name:"文具用品"},
                {name:"食品生鲜"},
                {name:"图书音像"},
                {name:"母婴童装"},
                {name:"玩具乐器"}
            ],
            con:[
                {img:"../../static/img/WechatIMG292.png",p1:"高夫男士护肤品套装洗面",p2:"控油补水保湿去黑头洁...",p3:"500ml",p4:"467",img2:"../../static/img/购物车.png"},
                {img:"../../static/img/WechatIMG292.png",p1:"高夫男士护肤品套装洗面",p2:"控油补水保湿去黑头洁...",p3:"500ml",p4:"467",img2:"../../static/img/购物车.png"},
                {img:"../../static/img/WechatIMG292.png",p1:"高夫男士护肤品套装洗面",p2:"控油补水保湿去黑头洁...",p3:"500ml",p4:"467",img2:"../../static/img/购物车.png"},
                {img:"../../static/img/WechatIMG292.png",p1:"高夫男士护肤品套装洗面",p2:"控油补水保湿去黑头洁...",p3:"500ml",p4:"467",img2:"../../static/img/购物车.png"},
                {img:"../../static/img/WechatIMG292.png",p1:"高夫男士护肤品套装洗面",p2:"控油补水保湿去黑头洁...",p3:"500ml",p4:"467",img2:"../../static/img/购物车.png"},
                {img:"../../static/img/WechatIMG292.png",p1:"高夫男士护肤品套装洗面",p2:"控油补水保湿去黑头洁...",p3:"500ml",p4:"467",img2:"../../static/img/购物车.png"}
            ],
            num:0,
        }
    },
    mounted(){
        console.log(this.$refs.aa);
        console.log(this.left_con);
        console.log(this.$refs);
        this.left_con = new BScroll(this.$refs.aa,{
            click:true
        });
        console.log(this.$refs.bb);
        this.right_con = new BScroll(this.$refs.bb,{
            click:true
        });
    },
    methods:{
        fn(a){
            this.num=a;
        }
    }
}

</script>
<style scoped>
   
</style>